<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Chat Room</title>
<script type="text/javascript">

var READY_STATE_UNINITIALIZED =0;
var READY_STATE_LOADING = 1;
var READY_STATE_LOADED = 2;
var READY_STATE_INTERACTIVE = 3;
var READY_STATE_COMPLETE = 4;

function createRequest(){
	var req = null;
	try
	{
		req = new XMLHttpRequest();
	}catch(ex){
	 	try{
		req = new ActiveXObject("Msxml2.XMLHTTP");
	 	}catch(ex1){
	 		try{
	 		req = new ActiveObject("Microsoft.XMLHTTP");
	 		}catch(ex2){
	 		req = null;
	 		}
	 	} 	
	 	}
	return req;
}

function sendRequest(url){
	alert(url);
	request = createRequest();
	if(request == null){
		return;
	}
	request.onreadystatechange=processRequestChange;
	request.open("GET",url,true);
	request.send(null);
}

function processRequestChange(){
	if(request==null){
		return;
	}
	var ready = request.readyState;
	var data = null;
	if(ready==READY_STATE_COMPLETE){
		if(request.status==200){
		data = request.responseText;
		temp = data;
		//alert(temp);
		data = eval('('+temp+')');  
		renderData(data);
		
		}
	}
}

function queryChatrooms(langID){
	
	sendRequest("GetChatroomsByLanguage?language_id="+langID);
	
}

function renderData(data){
	//alert(data);
	var htmlStr ="<tr><th>Name</th><th>Owner</th><th>Description</th></tr>";
	 for(var i=0;i<data.length;i++)  
     {  
		htmlStr+= "<tr><td>"+data[i].name+"</td>"+"<td>"+data[i].owner+"</td>"+"<td>"+data[i].description+"</td></tr>"; 
     }
	 document.getElementById("chatroom").innerHTML = htmlStr;
}
</script>
</head>
<body>
Please select a language below:<br>
<input type="radio" name="language" value="0" onclick="queryChatrooms(this.value)">Bahasa
<input type="radio" name="language" value="1" onclick="queryChatrooms(this.value)">Chinese
<input type="radio" name="language" value="2" onclick="queryChatrooms(this.value)">English

<p>

<table border="1" id="chatroom">
<tr>
<th>Name</th>
<th>Owner</th>
<th>Description</th>
</tr>

</table>

</body>
</html>